<template>
 <div>
    <div class="replyPage">
            
        <div class="replyPage_big">
              
                <div class="replyPage_big_reply" >
                  <p> 回复</p>
                </div>

                <div class="replyPage_big_share" >
                    <p>分享</p>
                </div>

                <div class="replyPage_big_peo" @click="fadeAllReply"></div>

        </div>
   </div>
		
 </div>
</template>
<script>
	export default{
		name:'reply',
		
		data(){
			return{
				
			}
			
			
		},
		
		methods:{
			fadeAllReply(){
//				console.log(111);
				var reply_inform = document.querySelector('.reply_inform');
				reply_inform.style.display ='block';
				
				var all_reply_matter =document.querySelector('.all_reply_matter');
				
				all_reply_matter.className = 'all_reply_matter all_reply';
			}
			
			
		}
		
	}
	
</script>
<style lang="less" scoped>
	.replyPage .replyPage_big {
		/*display: none;*/
		height: 80/64rem;
		cursor: pointer;
		width: 450/64rem;
		background: rgb(73, 61, 82);
		position: absolute;
		border-radius: 10/64rem;
		top: -15/64rem;
		right: 80/64rem;
		.replyPage_big_reply,
		.replyPage_big_share,
		.replyPage_big_peo {
			float: left;
			background-color: rgb(108, 89, 122);
			height: 60/64rem;
			margin-left: 10/64rem;
			margin-top: 10/64rem;
			border-radius: 8/64rem;
			color: white;
			font-size: 25/64rem;
			text-align-last: center;
			line-height: 60/64rem;
		}
		.replyPage_big_reply {
			width: 164/64rem;
			margin-left: 12/64rem;
			p {
				position: relative;
				margin-left: 36/64rem;
				&:before {
					content: '';
					height: 30/64rem;
					width: 30/64rem;
					display: inline-block;
					background: url('../../../../../static/images/12/t1.png') no-repeat;
					background-size: 30/64rem 30/64rem;
					position: absolute;
					left: 0;
					top: 16/64rem;
				}
			}
		}
		.replyPage_big_share {
			width: 164/64rem;
			p {
				position: relative;
				margin-left: 36/64rem;
				&:before {
					content: '';
					height: 30/64rem;
					width: 30/64rem;
					display: inline-block;
					background: url('../../../../../static/images/12/t2.png') no-repeat;
					background-size: 30/64rem 30/64rem;
					position: absolute;
					left: 0;
					top: 10/64rem;
				}
			}
		}
		.replyPage_big_peo {
			width: 70/64rem;
			/*  background: url('../../../../static/images/12/t3.png') no-repeat;

          background-size: 30/64rem 30/64rem;*/
			position: relative;
			&:after {
				content: '';
				height: 30/64rem;
				width: 30/64rem;
				display: inline-block;
				background: url('../../../../../static/images/12/t3.png') no-repeat;
				background-size: 30/64rem 30/64rem;
				position: absolute;
				left: 20/64rem;
				top: 15/64rem;
			}
		}
	}
	
</style>